<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>富豪榜</title>
    <link rel="stylesheet" href="./index.css" />
</head>

<body>
    <!-- 导航栏 -->
    <nav>
        <ul>
            <li>主页</li>
            <li>排行榜</li>
            <li>联系方式</li>
        </ul>
    </nav>
    <!-- 头部内容 -->

    <header>
        <!-- 导航栏的按钮 -->
        <button id="toggle">导航栏</button>
        <!-- 标题 -->
        <h2>欢迎来到富豪排行榜</h2>
        <!-- 欢迎语句 -->
        <p>weclome to the rich rank</p>
        <!-- 登陆按钮 -->
        <button id="login">登陆</button>
    </header>
    <!-- 主题内容 -->
    <div class="container">
        <!-- 左盒子 -->
        <aside>
            <!-- 五个按钮 -->
            <button id="add-user">添加账户</button>
            <button id="double">资金翻倍</button>
            <button id="show-millionaire">查询百万富翁</button>
            <button id="sort">财富榜</button>
            <button id="calculate">计算总额</button>
        </aside>
        <!-- 右盒子 -->
        <main id="main">
            <h2>
                <strong>Person</strong>
                <span>Wealth</span>

            </h2>
            <table cellspacing="10" cellpadding="5" class="person">
                <tbody>
                </tbody>
            </table>
        </main>
    </div>

    <script>
        let dataInfo = [{
            name: "English chan",
            money: 392001
        }, {
            name: "alex chan",
            money: 568932
        }, {
            name: "melon chan",
            money: 698756
        }, {
            name: "Clare Langner",
            money: 292489
        }, {
            name: "Abigail Rice",
            money: 953957
        }, {
            name: "Clarice Dias",
            money: 168472
        }, {
            name: "Vernon Lucas",
            money: 718225
        }, {
            name: "Nina Schmidt",
            money: 889147
        }, ];

        // 导航栏切换 通过增删类名
        let toggle = document.querySelector('#toggle');
        let nav = document.querySelector('nav')
        toggle.addEventListener('click', function() {
            document.body.classList.toggle('show_nav');
            // nav.classList.toggle('show_nav_2')
        })

        let tbody = document.querySelector("tbody");

        // 添加账户
        let addUser = document.querySelector("#add-user");
        addUser.addEventListener("click", add);

        // 声明一个空数组 用于存放数据
        let show = [];
        // 下标 获取数据
        let index = -1;

        function add() {
            // let tr = document.createElement("tr");

            // if (tbody.children.length < dataInfo.length) {
            //     tr.innerHTML = `
            //                      <td>${dataInfo[index].name}</td>
            //                      <td>$${getDollar(dataInfo[index].money)}</td>
            //                    `
            //     tbody.appendChild(tr);
            //     show.push(dataInfo[index]);
            //     // console.log(show);
            //     index++;
            //     calculate.disabled = false;
            //     // showMillionaire.disabled = false;
            // } else if (tbody.children.length = dataInfo.length) { // 数组添加完了
            //     addUser.disabled = true; // 添加按钮禁用
            // }

            index++;
            show.push(dataInfo[index]);
            updataDom(show);
        }
        let main = document.querySelector('#main')

        function updataDom(show) {
            main.innerHTML = `
            <h2>
                <strong>Person</strong>
                <span>Wealth</span>
            </h2>
            `;
            // /清除main下面的数据内容
            // 重新渲染
            show.forEach(function(ele) {
                let div = document.createElement('div');
                div.classList.add('person');
                div.innerHTML = `
                <strong>${ele.name}</strong>
               $${getDollar(ele.money)}
                `;
                main.appendChild(div)
            })
        }
        // 金额美元格式化方法
        function getDollar(num = 0) {
            let temps = num.toString().split('.'), //处理浮点数的情况，整数时会返回原数值
                target = temps[0].split('').reverse(), //倒序
                lastIndex = target.length;
            // console.log(temps, target, lastIndex);
            return target.map((item, index) => {
                    //第三个就增加一个','，要注意最后一个数字不添加
                    return ((index + 1) % 3 === 0 && (index !== lastIndex - 1)) ? (',' + item) : item;
                })
                .reverse() //倒序回来
                .join('') + (temps[1] ? '.' + temps[1] : '.00'); //如果是浮点数，就再加上小数部分
        }
        // 重新加载
        // function reload(newArr) {

        //     newArr.forEach(function(ele, index) {
        //         let newTr = document.createElement("tr");
        //         newTr.innerHTML =
        //             `<td>${ele["name"]}</td>
        //     <td>$${getDollar(ele["money"])}</td>`
        //         let old = document.querySelectorAll("tr")[index];
        //         // 交换新老表格
        //         tbody.replaceChild(newTr, old);
        //     })
        // }
        // 资金翻倍
        let double = document.querySelector("#double");
        double.addEventListener("click", goOn);

        function goOn() {
            // let newArr_1 = show.map(function(ele) {
            //     // console.log(ele.money);
            //     ele.money = ele.money * 2;
            //     return ele;
            // })
            // reload(newArr_1);
            show = show.forEach(function(ele) {
                return ele.money * 2;

            });
            updataDom(show);

        }

        // 查询百万富翁
        let showMillionaire = document.querySelector("#show-millionaire");
        showMillionaire.addEventListener("click", query);

        function query() {
            // let newArr_2 = show.filter(function(ele, index) {
            //     return ele["money"] > 1000000;

            // });
            // for (i = 0; i < index; i++) {
            //     let oldIndex = document.querySelector("td");
            //     oldIndex.parentNode.remove();
            // };

            // newArr_2.forEach(function(ele, index) {

            //     let newTr_3 = document.createElement("tr");
            //     newTr_3.innerHTML =
            //         `<td>${ele["name"]}</td>
            // <td>$${getDollar(ele["money"])}</td>`;

            //     tbody.appendChild(newTr_3);
            // });
            // reload(newArr_2)
            // addUser.disabled = false;
            show = show.filter(function(ele) {
                return ele.money >= 1000000;
            });
            updataDom(show);

        }

        // 财富榜part
        let sort = document.querySelector("#sort");
        sort.addEventListener("click", ranking);

        function ranking() {
            // let newArr_4 = show.sort(function(a, b) {
            //     return b.money - a.money;
            // })
            // reload(newArr_4);
            show = show.sort(function(ele) {
                return a.money - b.money;

            });
            updataDom(show);
        }

        // 计算总额part
        let calculate = document.querySelector("#calculate");
        calculate.addEventListener("click", altogether);

        function altogether() {
            // let zsum = show.reduce(function(sum, ele) {
            //         return sum = sum + ele["money"];
            //     }, 0)
            //     // console.log(res);

            // let total = document.createElement("tr");
            // total.innerHTML += `
            //     <td>Total sum:</td>
            //     <td>$${getDollar(zsum)}</td>
            //                  `;
            // tbody.appendChild(total);

            // calculate.disabled = true;
            let acc = show.reduce(function(sum, ele) {
                return sum += ele.money;
            }, 0)
            let div = document.createElement('div');
            div.innerHTML = `<h2><strong>Total sum:$${getDollar(acc)}</strong></h2>`;
            main.appendChild(div)
        }
    </script>
</body>

</html>